<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Spark • Splat Transitions</title>
  <style>
    html, body { margin: 0; height: 100%; width: 100%; background-color: black; }
    #canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; outline: none; touch-action: none; }
    .loading { position: absolute; top: 12px; left: 12px; color: white; font-family: Arial, sans-serif; font-size: 12px; opacity: .8; }
  </style>
  <script type="importmap">
    {
      "imports": {
        "three": "/examples/js/vendor/three/build/three.module.js",
        "three/addons/": "/examples/js/vendor/three/examples/jsm/",
        "lil-gui": "/examples/js/vendor/lil-gui/dist/lil-gui.esm.js",
        "@sparkjsdev/spark": "/dist/spark.module.js"
      }
    }
  </script>
</head>
<body>
  <div class="loading" id="loading">Loading...</div>
  <canvas id="canvas" tabindex="0"></canvas>
  <script type="module" src="./main.js"></script>
</body>
</html>


